<template>
    <van-form class="flex flex-col justify-around">
        <van-field
            class="field"
            type="username"
            label="邮箱"
            placeholder="请输入邮箱"
            v-model="input.username"
            :rules="[{ pattern: pattern.username, message: '邮箱格式错误' }]"
        >
            <div slot="left-icon" class="Icon">account_circle</div>
        </van-field>
        <van-field
            type="password"
            label="密码"
            v-model="input.password"
            placeholder="请输入密码"
        >
            <span slot="left-icon" class="Icon">password</span></van-field
        >
        <div
            class="
                mx-4
                p-4
                cursor-pointer
                text-blue-500
                hover:text-green-500
                transition
                text-right
            "
            @click="reset"
        >
            忘记密码
        </div>
        <van-button
            type="primary"
            class="rounded-xl"
            size="large"
            @click="upload"
            :loading="loading"
            >登录</van-button
        >
    </van-form>
</template>

<script>
import { Dialog, Notify } from "vant";

import { mapActions } from "vuex";
import timeLimit from "@/utils/timeLimit.js";
export default {
    data() {
        return {
            loading: false,
            input: {
                username: "",
                password: "",
            },
            pattern: {
                username:
                    /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                password:
                    /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,}$/,
            },
        };
    },
    methods: {
        ...mapActions(["SignIn", "Reset"]),

        async upload() {
            this.loading = true;
            const isEmail = this.input.username.match(/@/);
            const data = { type: isEmail ? "email" : "user", ...this.input };
            await this.SignIn(data);

            this.loading = false;
        },
        async reset() {
            const protect = timeLimit({
                key: "LastResetTime",
                message(timeout) {
                    return `5 分钟内曾经重置过，请等待 ${Math.ceil(
                        timeout / 1000
                    )} 秒`;
                },
            });
            if (protect) return;
            return Dialog.confirm({
                title: "重置用户",
                message: "是否重置用户名" + this.input.username,
                theme: "round-button",
            })
                .then(() => {
                    window.localStorage.setItem(
                        "LastResetTime",
                        new Date().getTime()
                    );
                })
                .then(() => this.Reset(this.input.username))
                .then(() =>
                    Notify({
                        type: "primary",
                        message: "已经发送重置邮件，请检查邮件哦",
                    })
                )
                .catch((err) => {
                    console.log("reset password: ", err);
                    Notify("取 消 重 置 用 户 名");
                });
        },
    },
};
</script>

<style lang="less" scoped>
.field {
    @apply items-center justify-evenly bg-transparent;
}
.Icon {
    @apply text-blue-500 cursor-default text-2xl mx-2;
}
</style>
